<template>
    <div class="order_page">
        <head-top head-title="订单列表" go-back='true'></head-top>
        <ul class="order_list_ul" v-load-more="loaderMore">
            <!--<li class="order_list_li" v-for="item in orderList" :key="item.id">-->
                 <router-link :to="{path: 'orderDetail', query:{id: item.order}}"  v-for="item in orderList"   class=" order_list_li">

                     <img :src="item.goods.goods_front_image">
                <section class="order_item_right">
                <span class="brief">
                  {{ item.goods.goods_brief }}
                </span>
                    <h4 class="price">
                        <span>实收款</span>
                        <span class="goodprice">
                  ￥{{ item.goods.goods_price }}
                </span>
                    </h4>
                </section>

                    </router-link>

        </ul>
        <transition name="loading">
            <loading v-show="showLoading"></loading>
        </transition>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>

    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import computeTime from 'src/components/common/computeTime'
    import loading from 'src/components/common/loading'
    import {getImgPath} from 'src/components/common/mixin'
    import footGuide from 'src/components/footer/footGuide'
    import {getOrderList, publishgood} from 'src/service/getData'
    import {loadMore} from 'src/components/common/mixin'
    import {imgBaseUrl} from 'src/config/env'
    import {getStore, setStore} from '../../config/mUtils'

    export default {
        data() {
            return {
                orderList: null, //订单列表
                offset: 0,
                preventRepeat: false,  //防止重复获取
                showLoading: true, //显示加载动画
                gooddescription: "",
                price: 0,
                imgList: [],
                imgsize: 0,
                imgData: {
                    accept: 'image/gif, image/jpeg, image/png, image/jpg',
                },
                formData: null,
                imgBaseUrl
            }
        },
        activated() {
            this.initData();
        },
        mounted() {
            this.initData();
        },
        mixins: [loadMore],
        components: {
            headTop,
            footGuide,
            loading,
            computeTime,
        },
        computed: {
            ...mapState([
                'userInfo', 'geohash','group_name'
            ]),
        },
        methods: {
            ...mapMutations([
                'SAVE_ORDER'
            ]),
            //初始化获取信息
            async initData() {
                let usertoken = getStore('user_token')
                if (!usertoken) {
                    this.$router.push('/login');
                }
                console.log('bbbbbbbbbbbbbb' + usertoken)
                if (usertoken) {
                    let res = await getOrderList(this.offset);
                    this.orderList = [...res];
                    this.hideLoading();
                } else {
                    this.hideLoading();
                }

            },


            //加载更多
            async loaderMore() {
                if (this.preventRepeat) {
                    return
                }
                this.preventRepeat = true;
                this.showLoading = true;
                this.offset += 10;
                //获取信息
                let res = await getOrderList(this.offset);
                this.orderList = [...this.orderList, ...res];
                this.hideLoading();
                if (res.length < 10) {
                    return
                }
                this.preventRepeat = false;
            },
            //显示详情页
            showDetail(item) {
                this.SAVE_ORDER(item);
                this.preventRepeat = false;
                this.$router.push('/order/orderDetail');
            },

            //生产环境与发布环境隐藏loading方式不同
            hideLoading() {
                this.showLoading = false;
            },
        },
        watch: {
            userInfo: function (value) {
                if (value && value.user_id && !this.orderList) {
                    this.initData();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .order_page {
        margin-bottom: 2rem;

        img {
            @include wh(3.9rem, 3.9rem);
            border-radius: 0.1em;
        }
    }

    .order_list_ul {
        padding-top: 0.7rem;
        margin-top: 2.1em;

        .order_list_li {
            background-color: #fff;
            display: flex;
            margin-bottom: 0.5rem;
            overflow: hidden;
            border-radius: 0.1em;
        }

        .brief {
            @include font(0.62em, 0.8rem, 'PingFangSC-Regular');
            margin-bottom: 0.3em;
            margin: 0.1em;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 19em;
            display: inline-block;
            white-space: nowrap;
        }

        h4 {
            @include font(0.7em, 0.53rem, 'PingFangSC-Regular');
            text-align: right;
            margin-top: 1.9em;
            display: block;
        }
    }

    .loading-enter-active, .loading-leave-active {
        transition: opacity .7s
    }

    .loading-enter, .loading-leave-active {
        opacity: 0
    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
